<template>
    <div class="electricityBox flex">
        <div class="progressBox">
            <el-progress :percentage="percentage" :color="customColor"></el-progress>
        </div>
    </div>
</template>

<script>
export default {
    name: 'electricity',
    components:{
        
    },
    data(){
        return{
           percentage: this.$store.state.battery,
           customColor: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#5cb87a', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#6f7ad3', percentage: 100}
           ],
        }
    },
    mounted(){
    },
    methods:{
        
    },

    //属性监听
    watch:{
       "$store.state.battery": function(val){
           this.percentage = val;
       }
    }

}
</script>

<style scoped lang="less">
 .electricityBox{
     position: absolute;
     z-index: 1998;
     top: 0;
     height: 46px;
     line-height: 46px;
     background-color: #ffffff;
     right: 0;
     overflow: hidden;
    .progressBox{
        width: 80px;
    }
 }
 .electricitiTxt{
     font-size: 12px;
 }
</style>